<script setup lang="ts">
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import { useRouter } from 'vue-router'
import orderInfoApi from '@/api/orderInfo'
import wechatPay from '@/api/wechatPay'
import QrcodeVue from 'qrcode.vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
const router = useRouter()
const payBtnDisabled = ref(false) //确认支付按钮是否禁用
const codeDialogVisible = ref(false) //微信支付二维码弹窗

const payOrder = ref({
  //订单信息
  productId: '', //商品id
  payType: 'wxpay', //支付方式
})

const orderNo = ref('')
const codeUrl = ref('weixin://wxpay/bizpayurl?pr=TJoWf0Az3')
const timer = ref<any | null>(null)

const orderList = ref([
  {
    orderId: '2156997110141520699',
    date: '2022-06-21',
    storeId: '1',
    store: {
      name: 'YourLife',
      img: '/src/assets/vue.svg',
    },
    products: [
      {
        name: '罗技PowerPlay鼠标垫无线充电底座G903/GPW一代二代/G502X plus',
        specs: [
          {
            name: '颜色',
            value: '黑色',
          },
          {
            name: '尺寸',
            value: '100*100*100',
          },
        ],
        count: 1,
        price: 100,
        img: '/src/assets/vue.svg',
      },
      {
        name: '罗技PowerPlay鼠标垫无线充电底座G903/GPW一代二代/G502X plus',
        count: 1,
        price: 100,
        specs: [
          {
            name: '颜色',
            value: '白色',
          },
          {
            name: '尺寸',
            value: '100*100*100',
          },
        ],
        img: '/src/assets/vue.svg',
      },
    ],
    status: 1,
    amountPrice: 100,
    img: '/src/assets/vue.svg',
  },
])

const selectPayType = (type: any) => {
  console.log('支付方式：' + type)
  payOrder.value.payType = type
}

const closeDialog = () => {
  console.log('close.................')
  payBtnDisabled.value = false
  console.log('清除定时器')
  clearInterval(timer.value)
}

const queryOrderStatus = () => {
  orderInfoApi.queryOrderStatus(orderNo.value).then((response) => {
    console.log('查询订单状态：', response.data.code)

    // 支付成功后的页面跳转
    if (response.data.code === 200) {
      console.log('清除定时器')
      clearInterval(timer.value)
      // 三秒后跳转到支付成功页面
      setTimeout(() => {
        router.push({ path: '/mine/my-order' })
      }, 3000)
    }
  })
}

const toPay = () => {
  //禁用按钮，防止重复提交
  payBtnDisabled.value = true

  //微信支付
  if (payOrder.value.payType === 'wxpay') {
    let data = {
      couponAmount: 0,
      couponId: 0,
      nickName: userStore.userInfo.nickName,
      payType: 1,
      orderItemList: [
        {
          productId: 1,
          skuId: '1_0',
          skuName: '小米 红米Note10 5G手机 颜色:白色 内存:8G',
          skuNum: 1,
          skuPrice: 1200,
        },
      ],
      originalTotalAmount: 0.01,
      receiverAddress: '河北省张家口市沽源县快乐家园1号',
      receiverCity: 130700,
      receiverDistrict: 130724,
      receiverName: '老八',
      receiverPhone: '15012563333',
      receiverProvince: 130000,
      receiverTagName: '公司',
      totalAmount: 0.01,
    }
    wechatPay.createOrder(data).then((res) => {
      console.log(res.data)
      if (res.data.code === 200) {
        codeUrl.value = res.data.data.codeUrl
        orderNo.value = res.data.data.orderNo
        codeDialogVisible.value = true
        //启动定时器
        timer.value = setInterval(() => {
          //查询订单是否支付成功
          queryOrderStatus()
        }, 3000)
      }
    })
    //支付宝支付
  } else if (payOrder.value.payType === 'alipay') {
  }
}
</script>

<template>
  <Header />
  <div class="payment-container">
    <div class="bg-fa of">
      <section id="index" class="wrapper">
        <header class="comm-title">
          <h2 class="fl tac"></h2>
        </header>
        <div class="product-info">
          <div
            class="order-item"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <div class="order-item-header">
              <div class="order-item-header-left">
                <input
                  type="checkbox"
                  :checked="item.selected"
                  @click="item.selected = !item.selected"
                />
                <span class="order-date">{{ item.date }}</span>
                <!-- <span>订单号：{{ item.orderId }}</span> -->
              </div>
              <div class="order-item-header-right">
                <span>{{ item.store.name }}</span>
              </div>
            </div>
            <div class="order-item-content">
              <div class="products">
                <div
                  class="product-item"
                  v-for="(product, index) in item.products"
                  :key="index"
                >
                  <div class="product-basic-info">
                    <div class="product-img">
                      <img :src="product.img" alt="" />
                    </div>
                    <div class="product-name-specs">
                      <div class="product-name">
                        <span>{{ product.name }}</span>
                      </div>
                      <div class="product-specs">
                        <div
                          class="product-spec-item"
                          v-for="(spec, index) in product.specs"
                          :key="index"
                        >
                          {{ spec.name }}：{{ spec.value }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="product-price">
                    <span class="origin-price has-discount">￥120</span>
                    <span class="discount-price">￥{{ product.price }}</span>
                  </div>
                  <div class="product-quantity">
                    <span>{{ product.count }}</span>
                  </div>
                  <div class="product-operation">
                    <span>申请售后</span>
                    <span>投诉商家</span>
                  </div>
                </div>
              </div>
              <div class="product-item-other">
                <div class="product-amount-price">
                  <div class="product-count">
                    <span
                      >共<strong
                        style="color: #f40; margin: 0 4px; font-weight: bold"
                        >{{ item.products.length }}</strong
                      >件商品</span
                    >
                  </div>
                  <div class="amount-price">
                    <span>合计：</span>
                    <span class="price" style="color: #f40; font-weight: bold"
                      >￥{{ item.amountPrice }}</span
                    >
                  </div>
                </div>
                <div class="product-status">
                  <span>交易成功</span>
                </div>
                <div class="operations">
                  <span class="comment">评价</span>
                  <span class="delete">删除订单</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="PaymentChannel_payment-channel-panel">
          <h3 class="PaymentChannel_title">选择支付方式</h3>
          <div class="PaymentChannel_channel-options">
            <!-- 选择微信 -->
            <div
              :class="[
                'ChannelOption_payment-channel-option',
                { current: payOrder.payType === 'wxpay' },
              ]"
              @click="selectPayType('wxpay')"
            >
              <div class="ChannelOption_channel-icon">
                <img
                  src="/src/assets/img/wxpay.png"
                  class="ChannelOption_icon"
                />
              </div>
              <div class="ChannelOption_channel-info">
                <div class="ChannelOption_channel-label">
                  <div class="ChannelOption_label">微信支付</div>
                  <div class="ChannelOption_sub-label"></div>
                  <div class="ChannelOption_check-option"></div>
                </div>
              </div>
            </div>

            <!-- 选择支付宝 -->
            <div
              :class="[
                'ChannelOption_payment-channel-option',
                { current: payOrder.payType === 'alipay' },
              ]"
              @click="selectPayType('alipay')"
            >
              <div class="ChannelOption_channel-icon">
                <img
                  src="/src/assets/img/alipay.png"
                  class="ChannelOption_icon"
                />
              </div>
              <div class="ChannelOption_channel-info">
                <div class="ChannelOption_channel-label">
                  <div class="ChannelOption_label">支付宝</div>
                  <div class="ChannelOption_sub-label"></div>
                  <div class="ChannelOption_check-option"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="payButtom">
          <el-button
            :disabled="payBtnDisabled"
            type="warning"
            round
            style="width: 280px; height: 44px; font-size: 18px"
            @click="toPay()"
          >
            确认支付
          </el-button>
        </div>
        <el-dialog
          v-model="codeDialogVisible"
          :show-close="false"
          title="使用微信扫码支付"
          width="332"
          center
          @close="closeDialog"
        >
          <QrcodeVue :value="codeUrl" :size="300" level="H" />
        </el-dialog>
      </section>
    </div>
  </div>
  <Footer />
</template>

<style lang="less" scoped>
.order-item {
  width: 100%;
  background-color: #fff;
  margin-bottom: 20px;
  border: 1px solid #e9e9e9;
  .order-item-header {
    display: flex;
    width: 100%;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e9e9e9;
    input {
      outline: none;
      margin: 0;
      margin-right: 10px;
    }
  }
  .order-item-header-left {
    width: 50%;
    font-size: 14px;
    color: #333;
    display: flex;
    .order-date {
      font-weight: bold;
      margin-right: 10px;
    }
  }
  .order-item-header-right {
    width: 50%;
    font-size: 14px;
    color: #333;
  }

  .order-item-content {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    .products {
      width: 65%;
      box-sizing: border-box;
    }
    .product-item {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      &:not(:last-child) {
        border-bottom: 1px solid #e9e9e9;
      }
    }
    .product-basic-info {
      width: 55%;
      display: flex;
      font-size: 14px;
      box-sizing: border-box;
      padding: 20px;
    }
    .product-img {
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: #ff5000;
      border-radius: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .product-name-specs {
      flex: 1;
      width: 20%;
      .product-name {
        margin-bottom: 10px;
        line-height: 18px;
      }
      .product-spec-item {
        color: #c9c9c9;
        font-size: 12px;
        &:not(:last-child) {
          margin-bottom: 5px;
        }
      }
    }
    .origin-price,
    .discount-price {
      display: block;
      text-align: center;
    }
    .product-price {
      width: 15.5%;
      box-sizing: border-box;
      padding: 20px 0;
    }
    .product-quantity {
      width: 10.5%;
      padding: 20px 0;
      box-sizing: border-box;
      text-align: center;
    }
    .product-operation {
      width: 19%;
      padding: 20px 0;
      span {
        display: block;
        text-align: center;
        &:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }
    .product-item-other {
      display: flex;
      width: 35%;
      border: 1px solid #e9e9e9;
      .product-amount-price,
      .product-status {
        padding: 20px 0;
        width: 34%;
        box-sizing: border-box;
        text-align: center;
        border-right: 1px solid #e9e9e9;
      }
      .product-count {
        margin-bottom: 10px;
      }
      .operations {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        box-sizing: border-box;
        & span:not(:last-child) {
          margin-bottom: 10px;
        }
      }
      .comment,
      .delete {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #e9e9e9;
        cursor: pointer;
      }
    }
  }
}
.payment-container {
  width: 100%;
}
#header {
  background-color: #fff;
  box-shadow: 0 2px 3px rgb(7 0 2 / 4%);
  padding: 30px 0;
  position: relative;
}
.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 1160px;
}
#logo {
  float: left;
  width: 220px;
  height: 72px;
  overflow: hidden;
  margin: 0 auto;
}
#logo a {
  display: table-cell;
  vertical-align: middle;
  height: 72px;
}
#logo a img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.nav,
.nav li,
.nav li a {
  float: left;
}
.nav {
  padding: 15px 0 0 50px;
}
.nav,
.nav li,
.nav li a {
  float: left;
}
.nav li a {
  border-bottom: 2px solid transparent;
  color: #666;
  display: block;
  font-size: 20px;
  line-height: 50px;
  padding: 0 10px;
  margin: 0 10px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

.nav li a:hover,
.nav li.current a {
  text-decoration: none;
}

#index {
  padding-bottom: 80px;
}

.comm-title {
  overflow: hidden;
  clear: both;
  margin: 40px 0 30px;
}

#footer {
  background-color: #323232;
  border-top-width: 5px;
  border-top-style: solid;
  color: #999;
  width: 100%;
  overflow: hidden;
  padding-top: 30px;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.bg-fa {
  background-color: #fafafa;
  height: 100%;
}

.of {
  overflow: hidden;
}

.hLh30 {
  height: 30px;
  line-height: 30px;
}

.c-999 {
  color: #999;
}

.fsize18 {
  font-size: 18px;
}

.f-fM {
  font-family: 'Microsoft YaHei';
}

.flink-list li {
  float: left;
  margin: 15px 30px 0 0;
}

.flink-list li a {
  color: #666;
  font-size: 12px;
}

.b-foot {
  border-top: 1px solid #393939;
  padding: 20px 0 40px 0;
  margin-top: 30px;
}

.b-f-link {
  color: #444;
  line-height: 12px;
  margin-left: -10px;
  line-height: 20px;
}

.b-f-link a,
.b-f-link span {
  color: #666;
  display: block;
  margin: 0 10px 5px;
  display: inline-block;
  vertical-align: middle;
}

.col-7 {
  width: 75%;
}

.mr20 {
  margin-right: 20px;
}

.fl {
  float: left;
}

#index ul {
  list-style-type: none;
  padding: 0;
}
#index li {
  display: inline-block;
  margin: 0 10px;
}
#index a.orderBtn {
  border: 1px solid #f3e2c6;
  background-color: #ffffff;
  color: #ff5000;
  border-radius: 5px;
  width: 180px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

#index a.current {
  border: 1px solid;
  background-color: #fffcf5;
}

.PaymentChannel_payment-channel-panel {
  position: relative;
  padding: 22px 0 0;
  margin-top: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 30px 0 rgb(238 242 245 / 80%);
}

.PaymentChannel_title {
  position: relative;
  display: flex;
  height: 25px;
  padding-left: 30px;
  line-height: 25px;
  font-size: 18px;
  font-weight: 500;
  color: #353535;
}

.PaymentChannel_title:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: calc(50% - 10px);
  width: 4px;
  height: 18px;
  background: #ff5000;
  border-radius: 0 4px 4px 0;
}

.PaymentChannel_channel-options {
  display: flex;
  flex-wrap: wrap;
  padding: 22px 20px 12px;
}

.ChannelOption_payment-channel-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 207px;
  height: 58px;
  margin: 0 10px 16px;
  border: 1px solid #e7ecf0;
  border-radius: 4px;
  cursor: pointer;
}

.ChannelOption_payment-channel-option.current {
  border-color: #ff5000;
}

.ChannelOption_payment-channel-option.current:after {
  content: '';
  display: block;
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 28px;
  height: 28px;
  background: url()
    no-repeat;
  background-size: 28px 28px;
}

.ChannelOption_channel-icon {
  margin: 0 11px 0 15px;
}

.ChannelOption_icon {
  display: block;
  width: 24px;
  height: 24px;
}

.ChannelOption_channel-info {
  position: relative;
  flex: 1;
}

.ChannelOption_channel-label {
  align-items: center;
  height: 21px;
}

.ChannelOption_channel-label {
  display: flex;
  position: relative;
}

.ChannelOption_label {
  line-height: 1;
  font-weight: 400;
}

.ChannelOption_label {
  font-size: 16px;
  color: #353535;
}

.ChannelOption_sub-label {
  flex: 1;
  display: flex;
  align-items: center;
}

.ChannelOption_check-option {
  margin-right: 15px;
}

.payButtom {
  margin: 30px 0;
  float: right;
}

@charset "utf-8";
.c-master {
  color: #68cb9b;
}
.bg-orange {
  background-color: #68cb9b;
}
.nav li.current a,
.nav li a:hover,
.h-r-login li a:hover,
.h-r-login li a:hover,
.c-tab-title a.current,
.c-btn-2,
.i-teach-wrap:hover a,
.paging a,
.paging a:hover,
.paging a.current,
#footer,
.u-m-dd ul li a:hover,
.u-m-dd ul li.current a,
.d-s-head-tab a.current {
  border-color: #68cb9b;
  color: #68cb9b;
}
.lh-menu ul li.lh-menu-stair ol li.lh-menu-second a.current-2,
.lh-menu ul li.lh-menu-stair li.lh-menu-second a.current-2,
.lh-menu ul li.lh-menu-stair ol li.lh-menu-second a.current-2 .lh-menu-i-2,
.lh-menu ul li.lh-menu-stair li.lh-menu-second a.current-2 .lh-menu-i-2,
.lh-menu-second a.current-2 span.fr,
#t-infor-menu p a.current,
.i-art-title:hover,
.q-sort-wrap span.current {
  border-color: #68cb9b;
  color: #68cb9b;
}
</style>
